<template>
  <div class="category-container">
    <!-- 搜索框 -->
    <div class="category-content-top flex">
      <svg
        t="1704877165287"
        class="category-content-icon"
        viewBox="0 0 6553 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1619"
        width="16"
        height="16"
        @click="router.back()"
      >
        <path
          d="M3071.85919997 82.688V32.6144h106.6368V82.688h299.328v0.384c0 55.5648-47.4624 100.608-106.2528 100.608H2793.88159997V82.688h278.016zM1213.99039997 233.3696c0 38.7072-6.528 80.448-85.248 80.448H223.99999997V227.84h438.144V162.5216H223.99999997V76.6208h438.144V32h113.8176v44.6208h438.0288v5.4528c0 39.0912-6.528 80.448-85.248 80.448h-352.7808V227.84h438.0288v5.5296z m0 410.5344c0 38.784-6.528 80.2944-85.2864 80.2944H223.99999997v-85.632h182.2464V579.968H361.81759997c-72.192 0-130.8288-49.92-130.8288-111.36V362.6624h976.2432v105.9456c0 61.44-58.8672 111.36-131.0208 111.36h-72.6528v58.56h210.432v5.376z m-693.7728-5.376h369.408V579.968h-369.408v58.56z m-146.2272-144.4224h690.0864c16.0512 0 29.2608-11.2128 29.2608-25.4976v-19.968H344.76799997v19.968c0 14.2848 13.1328 25.4976 29.184 25.4976zM4422.84799997 37.1456v49.6896h167.6928v6.7968c0 45.2736-6.4512 94.08-84.4032 94.08h-83.328v165.504h167.7312v6.912c0 45.5808-6.4512 93.9648-84.4032 93.9648h-83.328v165.6192h167.7312v6.7584c0 45.504-6.4512 94.0032-84.4032 94.0032h-83.328v165.6192h167.7312v6.7584c0 45.696-6.4512 94.0032-84.4032 94.0032H4055.85919997V37.1456h100.992v49.6896h165.312V37.1456h100.6848z m-265.9968 316.0704h165.312v-165.504h-165.312v165.504z m0 266.496h165.312v-165.6192h-165.312v165.6192z m0 266.3808h165.312v-165.6192h-165.312v165.6192z m-2949.6576-6.4512c0 61.248-58.8288 110.976-131.0208 110.976H361.85599997c-72.192 0-130.8288-49.728-130.8288-110.976v-106.0608h976.2048v106.0608z m-833.2032 25.4976h690.1248c16.0512 0 29.184-11.4048 29.184-25.4976v-20.2752H344.80639997v20.2752c0 14.0928 13.056 25.4976 29.184 25.4976z m3480.192-350.7456h19.584l-156.9408 355.2c-21.7728 49.2672-53.76 76.2624-157.44 77.2992l154.5984-349.824c30.336-68.9664 76.224-82.6752 140.1984-82.6752zM1832.34559997 824.576a344.3328 344.3328 0 0 0-107.904-16.32c-171.9168 0-328.512 116.0064-360.192 140.9664v-132.8256c103.9104-75.6864 230.592-117.3504 356.736-117.3504 22.5408 0 44.928 1.6512 66.432 4.224 109.0944 13.824 189.888 64.8192 254.8608 105.6384 50.1888 31.7568 89.9328 56.7936 127.6032 56.7936 72 0 77.6064-29.8368 77.6064-72.1152v-147.9552c0-65.3568-16.2432-80.3712-86.784-80.3712H1374.07999997V222.1568h116.0064v239.232h682.9056c126.4896 0 190.656 61.9392 190.656 184.32v165.5808c0 111.552-66.2016 175.6032-181.5168 175.6032-87.4752 0-146.6112-41.2416-209.2032-84.672-42.5856-29.8368-86.5152-60.3648-140.6208-77.6064zM1472.99839997 158.2592c-89.472 0-98.3424-77.376-98.8416-100.992V54.1568h721.6896c161.28 0 218.496 57.2544 218.496 218.496v125.376h-116.1216v-100.608c0-128.8704-21.0048-139.1616-139.392-139.1616H1472.99839997z m2436.9408 29.4528h-192.9216c-31.2576 0-56.064-9.216-73.8816-27.1872-25.1904-25.6128-28.992-62.5152-29.4144-73.728h396.9792V816.512c0 107.7888-28.7232 170.3808-175.872 170.3808h-35.5968v-100.8h35.5968c69.8496 0 75.1104-28.6848 75.1104-69.5808v-299.2896h-126.0672c-153.4464 0-173.184-88.704-173.184-165.888V239.2064h100.7616v112.0896c0 52.6848 2.5344 65.1264 72.4224 65.1264h126.0672V187.712zM2634.13759997 83.5712V35.1488h108.7104v781.2864c0 107.136-63.4752 168.3072-174.0672 168.3072H2493.43999997v-96.5376h63.2064c71.808 0 77.5296-31.0656 77.5296-71.808v-258.2016h-42.24v0.3072H2493.43999997v-0.3072c0.0768-54.144 44.0448-96.4608 98.304-96.4608l0.192-0.0768h42.24V180.1472h-140.736c0-54.2592 43.968-96.576 98.496-96.576h42.24z m305.1648 765.0048l-0.4992-2.688-100.2624-587.4432h3.84c74.6496 0 114.816 31.9872 126.4128 100.5312l64.32 368.8704c6.144 34.56-1.4976 66.5088-22.0032 89.7792a92.352 92.352 0 0 1-68.8512 30.9504h-2.9568z m331.9296 41.7408h206.592v3.4176c-1.5744 53.6064-49.2672 97.4592-106.2528 97.4592H2793.88159997v-100.8768h297.3312c75.8784 0 118.3488-89.3952 145.152-213.5808 3.1104-13.824 56.9472-314.5344 57.4848-317.7984 11.52-68.544 51.7248-100.4544 126.4896-100.4544h3.9936l-0.5376 3.6096-73.9968 429.312c-14.592 87.4368-25.4976 136.4352-78.5664 198.912zM5147.03359997 66.752h223.872v0.3072c0 58.752-47.5008 115.5072-106.176 115.5072H5016.43519997c-78.5664 0-170.9952 44.16-170.9952 178.4064v132.5568h351.8976v0.1536h136.128v0.384c0 58.7136-47.4624 115.3536-106.176 115.3536H4845.43999997v374.4h-115.6992V347.7248c0-146.9952 87.8976-280.9728 277.7088-280.9728h139.584z m1072.704 48.6912c81.1392-89.472 148.2624-42.5088 148.2624 32.8704V872.576c0 61.44-49.8048 111.2832-111.168 111.2832V306.0224c0-25.0752-19.4304-45.696-48.6912-12.5952l-286.1952 281.5872-286.272-281.5872c-31.2576-31.3344-48.4992-12.48-48.4992 12.5952v677.8368h-111.4752V148.3136c0-75.3792 67.2384-122.3424 148.3776-32.8704l297.8688 294.7968 297.792-294.7968z"
          p-id="1620"
          fill="#FF4613"
        ></path>
      </svg>
      <el-input
        size="small"
        class="search-item-top-left"
        :prefix-icon="Search"
        placeholder="搜索"
        disabled
      />
      <el-button class="category-content-botton">打开APP</el-button>
    </div>
    <div class="baacks"></div>
    <div class="category-content-bottom">
      <van-tree-select
        v-model:main-active-index="activeIndex"
        height="100vw"
        :items="items"
      >
        <template #content>

              <div
              ref="element"
                class="content-item"
                v-for="(category, index) in categoryItem"
                :key="index"
              >
                <div class="content-item-top flex" :class="activeIndex == index ? 'actives' : ''">
                  <span>{{ category["0"] && category["0"].name }}</span>
                  <svg
                    t="1704955232268"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2816"
                    width="32"
                    height="32"
                  >
                    <path
                      d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z"
                      p-id="2817"
                      fill="#A8A8B0"
                    ></path>
                  </svg>
                </div>

                <div class="content-item-bottom flex">
                  <div
                    class="content-item-div"
                    v-for="(metadataValuesItem, index) in category['0'] &&
                    category['0'].metadataValues"
                    :key="metadataValuesItem.id"
                  >
                    {{ metadataValuesItem.name }}
                  </div>
                </div>
              </div>
        </template>
      </van-tree-select>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import { reqCategoryList, reqCategoryItem } from "@/api/category/index";
import { ref } from "vue";
import { onMounted } from "vue";
import { useRouter } from "vue-router";

const router = useRouter()

const element = ref(null)






// import BScroll from '@better-scroll/core'
// import { nextTick } from "vue";
const activeIndex = ref(0);
// const items = [{ text: '分组 1' }, { text: '分组 2' },{ text: '分组 2' },{ text: '分组 2' },{ text: '分组 2' },{ text: '分组 2' },{ text: '分组 2' },{ text: '分组 2' },{ text: '分组 2' },{ text: '分组 2' },{ text: '分组 2' },{ text: '分组 2' },{ text: '分组 2' },{ text: '分组 2' }];
const items = ref([]);

const categoryItem = ref([]);
// reqCategoryList
onMounted(() => {
//   const height = element.value.offsetHeight;
// console.log(height)
  getCategory();
  // nextTick(()=>{
  //   let bs = new BScroll('.van-tree-select',{
  //   probeType: 3,
  //   click: true
  // })
  // })

  // getCategoryItem()
});
async function getCategory() {
  try {
    let result = await reqCategoryList();
    console.log(result);
    const resultList = result.data;
    items.value = resultList.map((item) => {
      // console.log(item)
      const newObj = { ...item };
      newObj.text = newObj.title;
      delete newObj.title;
      return newObj;
    });
    const newArr: any = resultList.map((item) => {
      const oldList = { ...item.subCategories };
      // newArr.push(...oldList)
      // console.log('xxxx',newArr)
      return oldList;
    });
    categoryItem.value = [...newArr];
  } catch (error) {
    console.log(error);
  }
}
// async function getCategoryItem(){
//   try {
//     let result = await reqCategoryItem(3)
//     console.log(result)
//   } catch (error) {
//     console.log(error)
//   }
// }
</script>

<style scoped>

.actives{
  color: #f86342;
}
::v-deep(.van-tree-select){
  height: 100vh !important;
}
.swiperList {
  height: 100%;
  overflow: hidden;
}
.category-container {
  height: 100%;
}
.category-content-top {
  position: fixed;
  top: 0px;
  height: 40px;
  padding: 15px 15px 0px 15px;
  justify-content: space-around;
  z-index: 999;
  background-color: #fff;
}
.category-content-icon {
  height: 15px;
  width: 70px;
  margin: auto 0px;
}
:deep(.el-input__wrapper) {
  border-radius: 50px;
  background-color: #eff1f4;
  box-shadow: none !important;
  margin-left: 15px;
}
.search-item-top-left {
  width: 190px;
  height: 30px;
}
.category-content-botton {
  font-size: 12px;
  color: #f86442;
  width: 70px;
  border: 1px solid #ff4613;
  border-radius: 50px;
  margin-left: 15px;
}

::v-deep(.van-tree-select__content) {
  margin-left: -30px;
  z-index: 9;
  height: 100% !important;
}

.abc {
  background-color: #f86442;
}
::v-deep(.van-sidebar) {
  padding-right: -63px !important;
  background-color: #fff;
}
::v-deep(.van-sidebar-item) {
  width: 90px;
  background-color: #fff;
  text-align: center;
  border-bottom: 1px solid #e8e8e8;
  color: #72727b;
  font-size: 14px;
}
::v-deep(.van-sidebar-item):last-child{
  border: none;
}
.baacks {
  background-color: #f0f0f0;
  height: 60px;
}
::v-deep(.van-sidebar-item--select:before) {
  background-color: #f86342;
  height: 100%;
}
.content-item-top {
  height: 48px;
  font-size: 14px;
  justify-content: space-between;
  border-bottom: 1px solid #eff1f4;
}
.content-item-top:last-child {
  border: none;
}
.content-item-top > svg {
  margin: auto 30px;
  width: 15px;
  height: 15px;
}
/* 72727b */
.content-item-top > span {
  line-height: 50px;
  margin-right: 30px;
}
.content-item-bottom {
  display: flex;
  padding: 15px 0px 0px 10px;
  flex-wrap: wrap;
}
.content-item-bottom > span:last-child {
  margin-right: 0px;
}
.content-item-div {
  color: #72727b;
  margin-right: 20px;
  margin-bottom: 15px;
}
</style>
